<template>
  <div class="app-container home">
    <!-- 顶部横幅区域 -->
    <div class="banner">
      <div class="banner-content">
        <h1>旅立方后台管理框架</h1>
        <p class="subtitle">专为旅游行业打造的微服务架构管理平台</p>
        <div class="stats-row">
          <div class="stat-item">
            <div class="stat-value">{{ formatNumber(userCount) }}</div>
            <div class="stat-label">注册用户</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ formatNumber(checkinCount) }}</div>
            <div class="stat-label">旅行签到</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ formatNumber(activeUsers) }}</div>
            <div class="stat-label">活跃用户</div>
          </div>
        </div>
      </div>
      <div class="banner-image">
        <div class="stats-grid">
          <div class="stats-item">
            <div class="stats-title">热门地点</div>
            <div class="stats-value">北京</div>
            <div class="stats-subvalue">25%</div>
          </div>
          <div class="stats-item">
            <div class="stats-title">平均时长</div>
            <div class="stats-value">{{ avgSessionTime }}分钟</div>
            <div class="stats-subvalue">↑ {{ sessionTrend }}%</div>
          </div>
          <div class="stats-item">
            <div class="stats-title">男女比例</div>
            <div class="stats-value">{{ genderRatio.male }}:{{ genderRatio.female }}</div>
            <div class="stats-subvalue">
              <el-progress :percentage="genderRatio.male" :color="genderColors" :show-text="false" />
            </div>
          </div>
          <div class="stats-item">
            <div class="stats-title">活跃度</div>
            <div class="stats-value">高</div>
            <div class="stats-subvalue">88%</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 数据概览 -->
    <div class="data-overview">
      <el-row :gutter="20">
        <el-col :span="8" :xs="24" :sm="12" :md="8">
          <div class="data-card">
            <div class="data-icon">
              <i class="el-icon-location-information"></i>
            </div>
            <div class="data-content">
              <div class="data-value">{{ topLocations.length }}</div>
              <div class="data-label">热门打卡地点</div>
              <div class="data-tags">
                <el-tag v-for="(loc, index) in topLocations.slice(0, 3)" :key="index" size="mini" type="info">
                  {{ loc.name }}
                </el-tag>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="8" :xs="24" :sm="12" :md="8">
          <div class="data-card">
            <div class="data-icon">
              <i class="el-icon-user"></i>
            </div>
            <div class="data-content">
              <div class="data-value">{{ genderRatio.male }}% / {{ genderRatio.female }}%</div>
              <div class="data-label">男女比例</div>
              <div class="progress-wrapper">
                <el-progress :percentage="genderRatio.male" :color="genderColors" :show-text="false" />
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="8" :xs="24" :sm="12" :md="8">
          <div class="data-card">
            <div class="data-icon">
              <i class="el-icon-time"></i>
            </div>
            <div class="data-content">
              <div class="data-value">{{ avgSessionTime }}分钟</div>
              <div class="data-label">平均使用时长</div>
              <div class="data-trend">
                <span class="trend-up">↑ {{ sessionTrend }}%</span> 较上月
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 技术栈展示 -->
    <div class="tech-stack">
      <h2 class="section-title"><i class="el-icon-cpu"></i> 核心技术栈</h2>
      <div class="tech-grid">
        <div class="tech-category">
          <h3><i class="el-icon-data-line"></i> 后端技术</h3>
          <ul>
            <li><i class="el-icon-check"></i> SpringBoot</li>
            <li><i class="el-icon-check"></i> SpringCloud</li>
            <li><i class="el-icon-check"></i> Nacos</li>
            <li><i class="el-icon-check"></i> Sentinel</li>
            <li><i class="el-icon-check"></i> Seata</li>
            <li><i class="el-icon-check"></i> MyBatis</li>
            <li><i class="el-icon-check"></i> Redis</li>
          </ul>
        </div>
        <div class="tech-category">
          <h3><i class="el-icon-monitor"></i> 前端技术</h3>
          <ul>
            <li><i class="el-icon-check"></i> Vue</li>
            <li><i class="el-icon-check"></i> Vuex</li>
            <li><i class="el-icon-check"></i> Element-ui</li>
            <li><i class="el-icon-check"></i> Axios</li>
            <li><i class="el-icon-check"></i> Echarts</li>
            <li><i class="el-icon-check"></i> Quill</li>
            <li><i class="el-icon-check"></i> Splitpanes</li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 功能特色展示 -->
    <div class="features">
      <h2 class="section-title"><i class="el-icon-star-on"></i> 系统特色</h2>
      <div class="feature-cards">
        <el-card class="feature-card" shadow="hover">
          <div slot="header" class="card-header">
            <i class="el-icon-s-operation"></i>
            <span>核心功能</span>
          </div>
          <div class="card-content">
            <div class="feature-item">
              <i class="el-icon-user"></i>
              <div>
                <h4>用户管理</h4>
                <p>用户信息配置与权限管理</p>
              </div>
              <div class="feature-stat">
                <el-progress :percentage="75" :color="customColors" :width="60" />
              </div>
            </div>
            <div class="feature-item">
              <i class="el-icon-date"></i>
              <div>
                <h4>旅行签到</h4>
                <p>用户旅行地点打卡记录</p>
              </div>
              <div class="feature-stat">
                <el-progress :percentage="88" :color="customColors" :width="60" />
              </div>
            </div>
            <div class="feature-item">
              <i class="el-icon-setting"></i>
              <div>
                <h4>偏好设置</h4>
                <p>个性化旅行偏好配置</p>
              </div>
              <div class="feature-stat">
                <el-progress :percentage="62" :color="customColors" :width="60" />
              </div>
            </div>
            <div class="feature-item">
              <i class="el-icon-user-solid"></i>
              <div>
                <h4>社交关注</h4>
                <p>用户间关注关系管理</p>
              </div>
              <div class="feature-stat">
                <el-progress :percentage="53" :color="customColors" :width="60" />
              </div>
            </div>
          </div>
        </el-card>

        <el-card class="feature-card" shadow="hover">
          <div slot="header" class="card-header">
            <i class="el-icon-coin"></i>
            <span>技术优势</span>
          </div>
          <div class="card-content">
            <div class="feature-item">
              <i class="el-icon-mobile-phone"></i>
              <div>
                <h4>响应式设计</h4>
                <p>完美适配各种终端设备</p>
              </div>
              <div class="feature-stat">
                <el-tag type="success">98%</el-tag>
              </div>
            </div>
            <div class="feature-item">
              <i class="el-icon-cloudy"></i>
              <div>
                <h4>微服务架构</h4>
                <p>模块化设计，易于扩展</p>
              </div>
              <div class="feature-stat">
                <el-tag type="success">已部署</el-tag>
              </div>
            </div>
            <div class="feature-item">
              <i class="el-icon-lock"></i>
              <div>
                <h4>权限管理</h4>
                <p>完善的RBAC权限控制系统</p>
              </div>
              <div class="feature-stat">
                <el-tag type="success">5级</el-tag>
              </div>
            </div>
            <div class="feature-item">
              <i class="el-icon-document-copy"></i>
              <div>
                <h4>代码生成</h4>
                <p>快速生成CRUD代码</p>
              </div>
              <div class="feature-stat">
                <el-tag type="success">80%+</el-tag>
              </div>
            </div>
          </div>
        </el-card>

        <el-card class="feature-card" shadow="hover">
          <div slot="header" class="card-header">
            <i class="el-icon-chat-line-round"></i>
            <span>热门目的地</span>
          </div>
          <div class="card-content">
            <div class="destination-list">
              <div v-for="(item, index) in topLocations" :key="index" class="destination-item">
                <div class="destination-rank">{{ index + 1 }}</div>
                <div class="destination-name">{{ item.name }}</div>
                <div class="destination-value">{{ item.count }}次</div>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>

    <!-- 系统简介 -->
    <div class="introduction">
      <h2 class="section-title"><i class="el-icon-info"></i> 系统简介</h2>
      <div class="intro-content">
        <p>旅立方是一套基于Vue/Element UI和Spring Boot/Spring Cloud & Alibaba前后端分离的分布式微服务架构的快速开发平台。</p>
        <p>专为旅游行业设计，提供用户管理、旅行签到、偏好设置、社交关注等核心功能，帮助旅游企业快速构建个性化服务平台。</p>
        <p>系统采用现代化的技术架构，具有高性能、高可用、易扩展等特点，是旅游行业信息化建设的理想选择。</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      userCount: 12568,
      checkinCount: 35642,
      activeUsers: 8432,
      avgSessionTime: 18.5,
      sessionTrend: 12.3,
      genderRatio: {
        male: 58,
        female: 42
      },
      genderColors: [
        { color: '#409EFF', percentage: 20 },
        { color: '#67C23A', percentage: 80 }
      ],
      customColors: [
        { color: '#f56c6c', percentage: 20 },
        { color: '#e6a23c', percentage: 40 },
        { color: '#5cb87a', percentage: 60 },
        { color: '#1989fa', percentage: 80 },
        { color: '#6f7ad3', percentage: 100 }
      ],
      topLocations: [
        { name: '北京', count: 3256 },
        { name: '上海', count: 2987 },
        { name: '杭州', count: 2543 },
        { name: '成都', count: 2312 },
        { name: '西安', count: 1987 }
      ]
    }
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank")
    },
    formatNumber(num) {
      return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
    }
  }
}
</script>

<style scoped lang="scss">
.home {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
  color: #333;
  max-width: 100%;
  margin: 0 auto;
  padding: 20px;

  /* 横幅区域样式 */
  .banner {
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #f5f7fa 0%, #e4ecf3 100%);
    border-radius: 12px;
    padding: 40px;
    margin-bottom: 40px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;

    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, #409EFF, #67C23A, #E6A23C, #F56C6C);
    }

    .banner-content {
      flex: 1;
      padding-right: 40px;

      h1 {
        font-size: 32px;
        font-weight: 600;
        color: #2c3e50;
        margin-bottom: 15px;
        line-height: 1.3;
      }

      .subtitle {
        font-size: 16px;
        color: #666;
        margin-bottom: 25px;
        line-height: 1.6;
      }

      .stats-row {
        display: flex;
        margin-bottom: 25px;
        gap: 15px;

        .stat-item {
          flex: 1;
          text-align: center;
          padding: 15px;
          background: rgba(255, 255, 255, 0.8);
          border-radius: 8px;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
          transition: transform 0.3s ease;

          &:hover {
            transform: translateY(-5px);
          }

          .stat-value {
            font-size: 24px;
            font-weight: 700;
            color: #409EFF;
            margin-bottom: 5px;
          }

          .stat-label {
            font-size: 14px;
            color: #666;
          }
        }
      }
    }

    .banner-image {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      
      .stats-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        width: 100%;
        max-width: 400px;
        
        .stats-item {
          background: #fff;
          border-radius: 8px;
          padding: 15px;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
          transition: transform 0.3s ease;
          
          &:hover {
            transform: translateY(-3px);
          }
          
          .stats-title {
            font-size: 14px;
            color: #666;
            margin-bottom: 5px;
          }
          
          .stats-value {
            font-size: 18px;
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 5px;
          }
          
          .stats-subvalue {
            font-size: 13px;
            color: #67C23A;
          }
        }
      }
    }
  }

  /* 数据概览样式 */
  .data-overview {
    margin-bottom: 30px;

    .data-card {
      background: #fff;
      border-radius: 10px;
      padding: 20px;
      display: flex;
      align-items: center;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
      height: 100%;
      transition: transform 0.3s ease;

      &:hover {
        transform: translateY(-5px);
      }

      .data-icon {
        width: 60px;
        height: 60px;
        background: rgba(64, 158, 255, 0.1);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 20px;
        flex-shrink: 0;

        i {
          font-size: 28px;
          color: #409EFF;
        }
      }

      .data-content {
        flex: 1;

        .data-value {
          font-size: 22px;
          font-weight: 600;
          color: #2c3e50;
          margin-bottom: 5px;
        }

        .data-label {
          font-size: 14px;
          color: #666;
          margin-bottom: 10px;
        }

        .data-tags {
          margin-top: 10px;

          .el-tag {
            margin-right: 5px;
            margin-bottom: 5px;
          }
        }

        .progress-wrapper {
          margin-top: 10px;
        }

        .data-trend {
          font-size: 13px;
          color: #666;

          .trend-up {
            color: #67C23A;
            font-weight: 600;
          }
        }
      }
    }
  }

  /* 技术栈样式 */
  .tech-stack {
    margin-bottom: 40px;

    .section-title {
      font-size: 24px;
      font-weight: 600;
      color: #2c3e50;
      margin-bottom: 30px;
      display: flex;
      align-items: center;

      i {
        margin-right: 10px;
        color: #409EFF;
      }
    }

    .tech-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 30px;

      .tech-category {
        background: #fff;
        border-radius: 10px;
        padding: 25px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        transition: all 0.3s;

        &:hover {
          transform: translateY(-5px);
          box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }

        h3 {
          font-size: 18px;
          font-weight: 600;
          color: #409EFF;
          margin-bottom: 20px;
          display: flex;
          align-items: center;

          i {
            margin-right: 10px;
          }
        }

        ul {
          list-style: none;
          padding: 0;

          li {
            padding: 8px 0;
            font-size: 15px;
            color: #555;
            display: flex;
            align-items: center;

            i {
              margin-right: 10px;
              color: #67C23A;
            }
          }
        }
      }
    }
  }

  /* 功能特色样式 */
  .features {
    margin-bottom: 40px;

    .section-title {
      font-size: 24px;
      font-weight: 600;
      color: #2c3e50;
      margin-bottom: 30px;
      display: flex;
      align-items: center;

      i {
        margin-right: 10px;
        color: #409EFF;
      }
    }

    .feature-cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 25px;

      .feature-card {
        border-radius: 10px;
        border: none;
        transition: all 0.3s;
        height: 100%;

        &:hover {
          transform: translateY(-5px);
          box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
        }

        .card-header {
          display: flex;
          align-items: center;
          border-bottom: none;
          padding: 20px;

          i {
            font-size: 20px;
            margin-right: 10px;
            color: #409EFF;
          }

          span {
            font-size: 18px;
            font-weight: 600;
            color: #2c3e50;
          }
        }

        .card-content {
          padding: 0 20px 20px;

          .feature-item {
            display: flex;
            align-items: center;
            margin-bottom: 20px;

            i {
              font-size: 22px;
              color: #67C23A;
              margin-right: 15px;
              flex-shrink: 0;
            }

            div {
              flex: 1;
              h4 {
                font-size: 16px;
                font-weight: 600;
                color: #333;
                margin-bottom: 5px;
              }

              p {
                font-size: 14px;
                color: #666;
                line-height: 1.6;
              }
            }

            .feature-stat {
              margin-left: 15px;
              flex-shrink: 0;
            }
          }

          .destination-list {
            .destination-item {
              display: flex;
              align-items: center;
              padding: 10px 0;
              border-bottom: 1px solid #eee;

              &:last-child {
                border-bottom: none;
              }

              .destination-rank {
                width: 24px;
                height: 24px;
                background: #409EFF;
                color: white;
                border-radius: 4px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 12px;
                margin-right: 15px;
                flex-shrink: 0;
              }

              .destination-name {
                flex: 1;
                color: #555;
              }

              .destination-value {
                font-weight: 600;
                color: #409EFF;
                flex-shrink: 0;
              }
            }
          }
        }
      }
    }
  }

  /* 系统简介样式 */
  .introduction {
    .section-title {
      font-size: 24px;
      font-weight: 600;
      color: #2c3e50;
      margin-bottom: 20px;
      display: flex;
      align-items: center;

      i {
        margin-right: 10px;
        color: #409EFF;
      }
    }

    .intro-content {
      background: #fff;
      border-radius: 10px;
      padding: 25px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);

      p {
        font-size: 15px;
        line-height: 1.8;
        color: #555;
        margin-bottom: 15px;

        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }

  /* 响应式调整 */
  @media (max-width: 1200px) {
    .home {
      padding: 15px;
    }
    
    .banner {
      padding: 30px;
    }
  }

  @media (max-width: 992px) {
    .banner {
      flex-direction: column;
      padding: 30px;

      .banner-content {
        padding-right: 0;
        margin-bottom: 30px;
        text-align: center;

        .stats-row {
          justify-content: center;
        }
      }
      
      .banner-image {
        .stats-grid {
          max-width: 100%;
        }
      }
    }

    .feature-cards {
      grid-template-columns: 1fr !important;
    }
    
    .data-overview {
      .el-col {
        margin-bottom: 20px;
      }
    }
  }

  @media (max-width: 768px) {
    .home {
      padding: 10px;
    }
    
    .banner {
      padding: 20px;

      h1 {
        font-size: 28px !important;
      }

      .stats-row {
        flex-direction: column;

        .stat-item {
          margin-right: 0 !important;
          margin-bottom: 15px;
        }
      }
    }

    .data-overview {
      .el-col {
        margin-bottom: 20px;
      }
    }

    .tech-grid {
      grid-template-columns: 1fr !important;
    }
    
    .features {
      .feature-cards {
        grid-template-columns: 1fr !important;
      }
    }
  }
  
  @media (max-width: 480px) {
    .home {
      padding: 8px;
    }
    
    .banner {
      padding: 15px;
      
      h1 {
        font-size: 24px !important;
      }
      
      .subtitle {
        font-size: 14px;
      }
      
      .stats-row {
        .stat-item {
          padding: 10px;
          
          .stat-value {
            font-size: 20px;
          }
          
          .stat-label {
            font-size: 12px;
          }
        }
      }
    }
    
    .data-overview {
      .data-card {
        padding: 15px;
        
        .data-icon {
          width: 50px;
          height: 50px;
          
          i {
            font-size: 24px;
          }
        }
        
        .data-content {
          .data-value {
            font-size: 18px;
          }
        }
      }
    }
    
    .tech-stack, .features, .introduction {
      .section-title {
        font-size: 20px;
      }
    }
  }
}
</style>